<template>
  <div class="lr">
    <img class="img" :src="sign" alt="" />
    <div class="form">
      <el-tabs class="tabs" v-model="activeName" >
        <el-tab-pane class="login" label="用户名/手机登录" name="first">
          <el-input class="input" placeholder="用户名/手机号" v-model="username" clearable></el-input>
          <el-input class="input" placeholder="密码" v-model="password" clearable></el-input>
          <div class="loginNow" @click="login">立即登录</div>
          <div class="line"></div>
          <div class="tips">
            <span>使用其他方法登录：</span>
            <a href="https://open.weixin.qq.com/connect/qrconnect?appid=wx5a8a2252c2ffc503&amp;response_type=code&amp;scope=snsapi_login&amp;redirect_uri=https%3A%2F%2Fvans.com.cn%2Fopenapi%2Ftrustlogin_api%2Fparse%2Ftrustlogin_plugin_weixin%2Fcallback%2F&amp;state=5c635198b19fdc55f9735e3d12e5bd04" class="bg-1"><img src="https://img2.vans.com.cn/public/app/trustlogin/statics/weixin.png" width="37px" height="37px"></a>
            <a href="https://api.weibo.com/oauth2/authorize?client_id=3312088635&amp;redirect_uri=https%3A%2F%2Fvans.com.cn%2Fopenapi%2Ftrustlogin_api%2Fparse%2Ftrustlogin_plugin_weibo%2Fcallback%2F&amp;state=76569a11fae46f015b19005dec0a87ad" class="bg-2"><img src="https://img2.vans.com.cn/public/app/trustlogin/statics/weibo.png" width="37px" height="37px"></a>
            <a href="https://graph.qq.com/oauth2.0/authorize?response_type=code&amp;client_id=101375061&amp;redirect_uri=https%3A%2F%2Fvans.com.cn%2Fopenapi%2Ftrustlogin_api%2Fparse%2Ftrustlogin_plugin_qq%2Fcallback&amp;state=6929cc9717ce853f2009d3db3344f154" class="bg-3"><img src="https://img2.vans.com.cn/public/app/trustlogin/statics/qqlogin.png" width="37px" height="37px"></a>
            <a href=" https://oauth.taobao.com/authorize?client_id=23584828&amp;redirect_uri=https%3A%2F%2Fvans.com.cn%2Fopenapi%2Ftrustlogin_api%2Fparse%2Ftrustlogin_plugin_taobao%2Fcallback%2F&amp;state=ec28e126829a7b3c1ff3b3c28c749ea5&amp;response_type=code" class="bg-4 hide"><img src="https://img2.vans.com.cn/public/app/trustlogin/statics/taobao.png" width="37px" height="37px"></a>
            <a href="https://ecopen.shopex.cn/transfer/alipayquick/authorize?appid=1979313536" class="bg-4"></a>
          </div>

        </el-tab-pane>
        <el-tab-pane class="reg" label="快速注册" name="second">
          <el-input class="input" placeholder="用户名/手机号" v-model="usernameX" clearable></el-input>
          <el-input class="input" placeholder="密码" v-model="passwordA" clearable></el-input>
          <el-input class="input" placeholder="确认密码" v-model="passwordB" clearable></el-input>
          <div class="loginNow" @click="register">注册</div>
          <div class="line"></div>
          <div class="tips">
            <span>使用其他方法登录：</span>
            <a href="https://open.weixin.qq.com/connect/qrconnect?appid=wx5a8a2252c2ffc503&amp;response_type=code&amp;scope=snsapi_login&amp;redirect_uri=https%3A%2F%2Fvans.com.cn%2Fopenapi%2Ftrustlogin_api%2Fparse%2Ftrustlogin_plugin_weixin%2Fcallback%2F&amp;state=5c635198b19fdc55f9735e3d12e5bd04" class="bg-1"><img src="https://img2.vans.com.cn/public/app/trustlogin/statics/weixin.png" width="37px" height="37px"></a>
            <a href="https://api.weibo.com/oauth2/authorize?client_id=3312088635&amp;redirect_uri=https%3A%2F%2Fvans.com.cn%2Fopenapi%2Ftrustlogin_api%2Fparse%2Ftrustlogin_plugin_weibo%2Fcallback%2F&amp;state=76569a11fae46f015b19005dec0a87ad" class="bg-2"><img src="https://img2.vans.com.cn/public/app/trustlogin/statics/weibo.png" width="37px" height="37px"></a>
            <a href="https://graph.qq.com/oauth2.0/authorize?response_type=code&amp;client_id=101375061&amp;redirect_uri=https%3A%2F%2Fvans.com.cn%2Fopenapi%2Ftrustlogin_api%2Fparse%2Ftrustlogin_plugin_qq%2Fcallback&amp;state=6929cc9717ce853f2009d3db3344f154" class="bg-3"><img src="https://img2.vans.com.cn/public/app/trustlogin/statics/qqlogin.png" width="37px" height="37px"></a>
            <a href=" https://oauth.taobao.com/authorize?client_id=23584828&amp;redirect_uri=https%3A%2F%2Fvans.com.cn%2Fopenapi%2Ftrustlogin_api%2Fparse%2Ftrustlogin_plugin_taobao%2Fcallback%2F&amp;state=ec28e126829a7b3c1ff3b3c28c749ea5&amp;response_type=code" class="bg-4 hide"><img src="https://img2.vans.com.cn/public/app/trustlogin/statics/taobao.png" width="37px" height="37px"></a>
            <a href="https://ecopen.shopex.cn/transfer/alipayquick/authorize?appid=1979313536" class="bg-4"></a>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex';
import {getSign} from '../../assets/data/login.js'
export default {
  data: function () {
    return {
      activeName:'first',
      sign: getSign(),
      username:'',
      password:'',
      usernameX:'',
      passwordA:'',
      passwordB:''
    };
  },
  computed:{
    user:function(){
      var user = []
      user.push(this.username)
      user.push(this.password)
      return user
    },
    userR:function(){
      var user = []
      user.push(this.usernameX)
      user.push(this.passwordA)
      user.push(this.passwordB)
      return user
    }
  },
  methods:{
    ...mapActions(["setUserMap"]),
    ...mapActions(["setLoginUser"]),
    login:function(){
      if (this.username !== '' && this.password !== '') {
        this.setLoginUser(this.user).then((value) =>{
          if (value) {
            this.username = ''
            this.password = ''
            this.$notify({
              title: '登录成功',
              message: '快去选购商品吧',
              type: 'success'
            });
            setTimeout(()=>{
              this.$router.push('/index')
            }, 3000)
          } else {
            this.$notify({
              title: '登录失败',
              message: '用户不存在或密码错误',
              type: 'success'
            });
          }
        })
      } else {
        this.$notify({
          title: '登录失败',
          message: '请检查用户名和密码输入',
          type: 'success'
        });
      }
    },
    register:function(){
      if (this.usernameX !== '' && this.passwordA === this.passwordB && this.passwordA !== '') {
        this.userR.splice(2, 1)
        this.setUserMap(this.userR).then((value)=>{
          if (value) {
            this.usernameX = ''
            this.passwordA = ''
            this.passwordB = ''
            this.$notify({
              title: '注册成功',
              message: '登录后选购商品',
              type: 'success'
            });
          } else {
            this.$notify({
              title: '注册失败',
              message: '用户名已存在',
              type: 'error'
            });
          }}
        )
      } else {
        console.log(4);
        this.$notify({
          title: '注册失败',
          message: '请检查用户名与密码',
          type: 'error'
        });
      }

    }
  }
};
</script>

<style scoped>
.lr {
  position: absolute;
  width: 50%;
  height: 500px;
  /* border: solid 1px red; */
  left: 23%;
  top: 20%;
}
.img{
  position: relative;
  width: 50%;
}
.line{
  margin-top: 30px;
  border-top: 1px solid gainsboro;
  position: relative;
  width: 380px;
}
.tabs{
  position:absolute;
  /* right: 50px; */
  left: -5px;
  top: -5px;
  height: 500px;
  /* border: 1px solid red; */
}
.form{
  position:absolute;
  right: 70px;
  top: 35px;
  height: 400px;
  width: 330px;
  /* border: 1px solid red; */
  overflow: hidden;
}
.input{
  position: relative;
  width: 310px;
  left: 10px;
  top: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  /* height: 80px; */
}
.loginNow{
  width: 310px;
  height: 45px;
  background:#c9192e;
  text-align: center;
  line-height: 45px;
  color: #fff;
  /* font-weight: bold; */
  font-family: "黑体";
  font-size: 15px;
  position: relative;
  left: 10px;
  margin-top: 35px;
  cursor: pointer;
}
.tips{
  font-size:15px;
  position: relative;
  left:8px;
  margin-top: 20px;
}
/* .login{
    width: 500px;
} */
</style>

<style>
.el-input__inner{
  height: 35px;
  border-radius: 0;
}
.el-input__inner:hover{
  /* height: 30px; */
  border-color: #c9192e;
}
.el-tabs__item:hover{
  color: #c9192e;

}
.el-tabs__item {
  width: 170px;
  height: 50px;
  text-align: center;
  font-size: 13px;
  /* border: 1px solid red; */
}
.el-tabs__item.is-active {
  color: #c9192e;
}
.el-tabs__active-bar{
  color: #c9192e;
  background: #c9192e;
}
.el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
  border-bottom-color: #c9192e;
}
.el-tabs .el-tabs--card .el-tabs--top{
  height: 100px;
}
.el-tab-pane{
  height: 500px;
}
</style>